<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS Grid 网格布局教程 | 知否</title>
	<style>
		body,html{
		    scroll-behavior: smooth;
		}
	</style>
    <meta name="description" content="Just playing around.">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/dist/assets/style.BAFIH5E8.css" as="style">
    
    <script type="module" src="/dist/assets/app.Ct44-VeG.js"></script>
    <link rel="preload" href="/dist/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/dist/assets/chunks/framework.CSGcjqEA.js">
    <link rel="modulepreload" href="/dist/assets/chunks/theme.CTRrYzfQ.js">
    <link rel="modulepreload" href="/dist/assets/Grid.md.CSGL2tGu.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/dist/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>知否</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/dist/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>前端开发</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./html.html" data-v-43f1e123><!--[-->HTML<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./css.html" data-v-43f1e123><!--[-->CSS<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./js.html" data-v-43f1e123><!--[-->JavaScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./es6.html" data-v-43f1e123><!--[-->ECMAScript6<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./ts.html" data-v-43f1e123><!--[-->TypeScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./git.html" data-v-43f1e123><!--[-->Git<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./react.html" data-v-43f1e123><!--[-->React<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./vue2.html" data-v-43f1e123><!--[-->Vue2<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./vue3.html" data-v-43f1e123><!--[-->Vue3<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./node.html" data-v-43f1e123><!--[-->Node.js<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./%E5%B0%8F%E7%A8%8B%E5%BA%8F.html" data-v-43f1e123><!--[-->微信小程序开发<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./uniapp.html" data-v-43f1e123><!--[-->UniApp<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./%E5%85%AC%E4%BC%97%E5%8F%B7%E5%BC%80%E5%8F%91.html" data-v-43f1e123><!--[-->公众号开发<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>PHP</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" data-v-43f1e123><!--[-->环境搭建<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E8%AF%AD%E6%B3%95.html" data-v-43f1e123><!--[-->PHP语法<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/mysql.html" data-v-43f1e123><!--[-->Mysql<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E5%BA%94%E7%94%A8.html" data-v-43f1e123><!--[-->PHP应用<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Composer.html" data-v-43f1e123><!--[-->Composer<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Thinkphp5.html" data-v-43f1e123><!--[-->Thinkphp5.0<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Laravel8.5.html" data-v-43f1e123><!--[-->Laravel5.6<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>网络技术</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/tcpip.html" data-v-43f1e123><!--[-->TCP/IP协议<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E5%B8%B8%E8%A7%81%E7%BD%91%E7%BB%9C%E5%91%BD%E4%BB%A4.html" data-v-43f1e123><!--[-->常见网络命令<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C.html" data-v-43f1e123><!--[-->计算机网络<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>运维技术</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E8%BF%90%E7%BB%B4%E6%8A%80%E6%9C%AF.html" data-v-43f1e123><!--[-->运维技术<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/AD%E5%9F%9F.html" data-v-43f1e123><!--[-->AD域<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>知识碎片</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80.html" data-v-43f1e123><!--[-->页面布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link active" href="/dist/Grid.html" data-v-43f1e123><!--[-->Grid 网格布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Flex%E5%B8%83%E5%B1%80.html" data-v-43f1e123><!--[-->Flex 布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/less.html" data-v-43f1e123><!--[-->Less<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Sass.html" data-v-43f1e123><!--[-->Sass<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/canvas.html" data-v-43f1e123><!--[-->Canvas<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/JavaScirpt.html" data-v-43f1e123><!--[-->JS文档<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/node%E7%8E%AF%E5%A2%83.html" data-v-43f1e123><!--[-->Node环境搭建<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/jq.html" data-v-43f1e123><!--[-->JQuery笔记<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/echarts.html" data-v-43f1e123><!--[-->Echarts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/nginx.html" data-v-43f1e123><!--[-->Nginx<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/wordpress.html" data-v-43f1e123><!--[-->WordPress<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/linux.html" data-v-43f1e123><!--[-->Linux<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>资料分享</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->TCP/IP协议<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->网络工程师<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Linux镜像<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1tByRfM5z4vLywmTt206YZg" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Web开发电子书<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->心理学电子书<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->摄影教程<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->系统激活工具<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->office软件<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->计算机维修教程<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->英语资料<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->简历模板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->教资<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->网络工程实战<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->安防弱点资料<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Adobe软件<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->PPT模板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1Y8q4vXkx9FUpi0U3a7rJKw" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->软考系统集成<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/ChatGPT.html" data-v-43f1e123><!--[-->ChatGPT<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-ccf7ddec data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ccf7ddec data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-ccf7ddec><div class="divider-line" data-v-ccf7ddec></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _dist_Grid" data-v-39a288b8><div><h1 id="css-grid-网格布局教程" tabindex="-1">CSS Grid 网格布局教程 <a class="header-anchor" href="#css-grid-网格布局教程" aria-label="Permalink to &quot;CSS Grid 网格布局教程&quot;">​</a></h1><h2 id="一、概述" tabindex="-1">一、概述 <a class="header-anchor" href="#一、概述" aria-label="Permalink to &quot;一、概述&quot;">​</a></h2><p>网格布局（Grid）是最强大的 CSS 布局方案。</p><p>它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/1_bg2019032501.png" alt="img"></p><p>上图这样的布局，就是 Grid 布局的拿手好戏。</p><p>Grid 布局与 <a href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="noreferrer">Flex 布局</a>有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。</p><p>Flex 布局是轴线布局，只能指定&quot;项目&quot;针对轴线的位置，可以看作是<strong>一维布局</strong>。Grid 布局则是将容器划分成&quot;行&quot;和&quot;列&quot;，产生单元格，然后指定&quot;项目所在&quot;的单元格，可以看作是<strong>二维布局</strong>。Grid 布局远比 Flex 布局强大。</p><h2 id="二、基本概念" tabindex="-1">二、基本概念 <a class="header-anchor" href="#二、基本概念" aria-label="Permalink to &quot;二、基本概念&quot;">​</a></h2><p>学习 Grid 布局之前，需要了解一些基本概念。</p><h3 id="_2-1-容器和项目" tabindex="-1">2.1 容器和项目 <a class="header-anchor" href="#_2-1-容器和项目" aria-label="Permalink to &quot;2.1 容器和项目&quot;">​</a></h3><p>采用网格布局的区域，称为&quot;容器&quot;（container）。容器内部采用网格定位的子元素，称为&quot;项目&quot;（item）。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>&lt;div&gt;</span></span>
<span class="line"><span>&lt;div&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;</span></span>
<span class="line"><span>&lt;div&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;</span></span>
<span class="line"><span>&lt;div&gt;&lt;p&gt;3&lt;/p&gt;&lt;/div&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre></div></blockquote><p>上面代码中，最外层的<code>&lt;div&gt;</code>元素就是容器，内层的三个<code>&lt;div&gt;</code>元素就是项目。</p><p>注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<code>&lt;p&gt;</code>元素就不是项目。Grid 布局只对项目生效。</p><h3 id="_2-2-行和列" tabindex="-1">2.2 行和列 <a class="header-anchor" href="#_2-2-行和列" aria-label="Permalink to &quot;2.2 行和列&quot;">​</a></h3><p>容器里面的水平区域称为&quot;行&quot;（row），垂直区域称为&quot;列&quot;（column）。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/1_bg2019032502.png" alt="img"></p><p>上图中，水平的深色区域就是&quot;行&quot;，垂直的深色区域就是&quot;列&quot;。</p><h3 id="_2-3-单元格" tabindex="-1">2.3 单元格 <a class="header-anchor" href="#_2-3-单元格" aria-label="Permalink to &quot;2.3 单元格&quot;">​</a></h3><p>行和列的交叉区域，称为&quot;单元格&quot;（cell）。</p><p>正常情况下，<code>n</code>行和<code>m</code>列会产生<code>n x m</code>个单元格。比如，3行3列会产生9个单元格。</p><h3 id="_2-4-网格线" tabindex="-1">2.4 网格线 <a class="header-anchor" href="#_2-4-网格线" aria-label="Permalink to &quot;2.4 网格线&quot;">​</a></h3><p>划分网格的线，称为&quot;网格线&quot;（grid line）。水平网格线划分出行，垂直网格线划分出列。</p><p>正常情况下，<code>n</code>行有<code>n + 1</code>根水平网格线，<code>m</code>列有<code>m + 1</code>根垂直网格线，比如三行就有四根水平网格线。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/1_bg2019032503.png" alt="img"></p><p>上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。</p><h2 id="三、容器属性" tabindex="-1">三、容器属性 <a class="header-anchor" href="#三、容器属性" aria-label="Permalink to &quot;三、容器属性&quot;">​</a></h2><p>Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。</p><h3 id="_3-1-display-属性" tabindex="-1">3.1 display 属性 <a class="header-anchor" href="#_3-1-display-属性" aria-label="Permalink to &quot;3.1 display 属性&quot;">​</a></h3><p><code>display: grid</code>指定一个容器采用网格布局。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>div {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032504.png" alt="img"></p><p>上图是<code>display: grid</code>的<a href="https://jsbin.com/guvivum/edit?html,css,output" target="_blank" rel="noreferrer">效果</a>。</p><p>默认情况下，容器元素都是块级元素，但也可以设成行内元素。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>div {</span></span>
<span class="line"><span>display: inline-grid;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码指定<code>div</code>是一个行内元素，该元素内部采用网格布局。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032505.png" alt="img"></p><p>上图是<code>display: inline-grid</code>的<a href="https://jsbin.com/qatitav/edit?html,css,output" target="_blank" rel="noreferrer">效果</a>。</p><blockquote><p>注意，设为网格布局以后，容器子元素（项目）的<code>float</code>、<code>display: inline-block</code>、<code>display: table-cell</code>、<code>vertical-align</code>和<code>column-*</code>等设置都将失效。</p></blockquote><h3 id="_3-2" tabindex="-1">3.2 <a class="header-anchor" href="#_3-2" aria-label="Permalink to &quot;3.2&quot;">​</a></h3><p>grid-template-columns 属性， grid-template-rows 属性</p><p>容器指定了网格布局以后，接着就要划分行和列。<code>grid-template-columns</code>属性定义每一列的列宽，<code>grid-template-rows</code>属性定义每一行的行高。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 100px 100px 100px;</span></span>
<span class="line"><span>grid-template-rows: 100px 100px 100px;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/qiginur/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>指定了一个三行三列的网格，列宽和行高都是<code>100px</code>。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032506.png" alt="img"></p><p>除了使用绝对单位，也可以使用百分比。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 33.33% 33.33% 33.33%;</span></span>
<span class="line"><span>grid-template-rows: 33.33% 33.33% 33.33%;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><strong>（1）repeat()</strong></p><p>有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用<code>repeat()</code>函数，简化重复的值。上面的代码用<code>repeat()</code>改写如下。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: repeat(3, 33.33%);</span></span>
<span class="line"><span>grid-template-rows: repeat(3, 33.33%);</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><code>repeat()</code>接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。</p><p><code>repeat()</code>重复某种模式也是可以的。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-columns: repeat(2, 100px 20px 80px);</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/cokohu/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>定义了6列，第一列和第四列的宽度为<code>100px</code>，第二列和第五列为<code>20px</code>，第三列和第六列为<code>80px</code>。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032507.png" alt="img"></p><p><strong>（2）auto-fill 关键字</strong></p><p>有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用<code>auto-fill</code>关键字表示自动填充。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: repeat(auto-fill, 100px);</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/himoku/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>表示每列宽度<code>100px</code>，然后自动填充，直到容器不能放置更多的列。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032508.png" alt="img"></p><p>除了<code>auto-fill</code>，还有一个关键字<code>auto-fit</code>，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有<a href="https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/" target="_blank" rel="noreferrer">行为差异</a>：<code>auto-fill</code>会用空格子填满剩余宽度，<code>auto-fit</code>则会尽量扩大单元格的宽度。</p><p><strong>（3）fr 关键字</strong></p><p>为了方便表示比例关系，网格布局提供了<code>fr</code>关键字（fraction 的缩写，意为&quot;片段&quot;）。如果两列的宽度分别为<code>1fr</code>和<code>2fr</code>，就表示后者是前者的两倍。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 1fr 1fr;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/hadexek/edit?html,css,output" target="_blank" rel="noreferrer">上面代码</a>表示两个相同宽度的列。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/1_bg2019032509.png" alt="img"></p><p><code>fr</code>可以与绝对长度的单位结合使用，这时会非常方便。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 150px 1fr 2fr;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/remowec/edit?html,css,output" target="_blank" rel="noreferrer">上面代码</a>表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032510.png" alt="img"></p><p><strong>（4）minmax()</strong></p><p><code>minmax()</code>函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-columns: 1fr 1fr minmax(100px, 1fr);</span></span></code></pre></div></blockquote><p>上面代码中，<code>minmax(100px, 1fr)</code>表示列宽不小于<code>100px</code>，不大于<code>1fr</code>。</p><p><strong>（5）auto 关键字</strong></p><p><code>auto</code>关键字表示由浏览器自己决定长度。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-columns: 100px auto 100px;</span></span></code></pre></div></blockquote><p>上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了<code>min-width</code>，且这个值大于最大宽度。</p><p><strong>（6）网格线的名称</strong></p><p><code>grid-template-columns</code>属性和<code>grid-template-rows</code>属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];</span></span>
<span class="line"><span>grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。</p><p>网格布局允许同一根线有多个名字，比如<code>[fifth-line row-5]</code>。</p><p><strong>（7）布局实例</strong></p><p><code>grid-template-columns</code>属性对于网页布局非常有用。两栏式布局只需要一行代码。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.wrapper {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 70% 30%;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码将左边栏设为70%，右边栏设为30%。</p><p>传统的十二网格布局，写起来也很容易。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-columns: repeat(12, 1fr);</span></span></code></pre></div></blockquote><h3 id="_3-3" tabindex="-1">3.3 <a class="header-anchor" href="#_3-3" aria-label="Permalink to &quot;3.3&quot;">​</a></h3><p>grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性</p><p><code>grid-row-gap</code>属性设置行与行的间隔（行间距），<code>grid-column-gap</code>属性设置列与列的间隔（列间距）。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>grid-row-gap: 20px;</span></span>
<span class="line"><span>grid-column-gap: 20px;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/mezufab/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>中，<code>grid-row-gap</code>用于设置行间距，<code>grid-column-gap</code>用于设置列间距。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032511.png" alt="img"></p><p><code>grid-gap</code>属性是<code>grid-column-gap</code>和<code>grid-row-gap</code>的合并简写形式，语法如下。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;;</span></span></code></pre></div></blockquote><p>因此，上面一段 CSS 代码等同于下面的代码。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>grid-gap: 20px 20px;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>如果<code>grid-gap</code>省略了第二个值，浏览器认为第二个值等于第一个值。</p><blockquote><p>根据最新标准，上面三个属性名的<code>grid-</code>前缀已经删除，<code>grid-column-gap</code>和<code>grid-row-gap</code>写成<code>column-gap</code>和<code>row-gap</code>，<code>grid-gap</code>写成<code>gap</code>。</p></blockquote><h3 id="_3-4-grid-template-areas-属性" tabindex="-1">3.4 grid-template-areas 属性 <a class="header-anchor" href="#_3-4-grid-template-areas-属性" aria-label="Permalink to &quot;3.4 grid-template-areas 属性&quot;">​</a></h3><p>网格布局允许指定&quot;区域&quot;（area），一个区域由单个或多个单元格组成。<code>grid-template-areas</code>属性用于定义区域。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 100px 100px 100px;</span></span>
<span class="line"><span>grid-template-rows: 100px 100px 100px;</span></span>
<span class="line"><span>grid-template-areas: &#39;a b c&#39;</span></span>
<span class="line"><span>                    &#39;d e f&#39;</span></span>
<span class="line"><span>                    &#39;g h i&#39;;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码先划分出9个单元格，然后将其定名为<code>a</code>到<code>i</code>的九个区域，分别对应这九个单元格。</p><p>多个单元格合并成一个区域的写法如下。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-areas: &#39;a a a&#39;</span></span>
<span class="line"><span>                  &#39;b b b&#39;</span></span>
<span class="line"><span>                  &#39;c c c&#39;;</span></span></code></pre></div></blockquote><p>上面代码将9个单元格分成<code>a</code>、<code>b</code>、<code>c</code>三个区域。</p><p>下面是一个布局实例。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-areas: &quot;header header header&quot;</span></span>
<span class="line"><span>                  &quot;main main sidebar&quot;</span></span>
<span class="line"><span>                  &quot;footer footer footer&quot;;</span></span></code></pre></div></blockquote><p>上面代码中，顶部是页眉区域<code>header</code>，底部是页脚区域<code>footer</code>，中间部分则为<code>main</code>和<code>sidebar</code>。</p><p>如果某些区域不需要利用，则使用&quot;点&quot;（<code>.</code>）表示。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-template-areas: &#39;a . c&#39;</span></span>
<span class="line"><span>                  &#39;d . f&#39;</span></span>
<span class="line"><span>                  &#39;g . i&#39;;</span></span></code></pre></div></blockquote><p>上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。</p><blockquote><p>注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为<code>区域名-start</code>，终止网格线自动命名为<code>区域名-end</code>。</p><p>比如，区域名为<code>header</code>，则起始位置的水平网格线和垂直网格线叫做<code>header-start</code>，终止位置的水平网格线和垂直网格线叫做<code>header-end</code>。</p></blockquote><h3 id="_3-5-grid-auto-flow-属性" tabindex="-1">3.5 grid-auto-flow 属性 <a class="header-anchor" href="#_3-5-grid-auto-flow-属性" aria-label="Permalink to &quot;3.5 grid-auto-flow 属性&quot;">​</a></h3><p>划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是&quot;先行后列&quot;，即先填满第一行，再开始放入第二行，即下图数字的顺序。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032506.png" alt="img"></p><p>这个顺序由<code>grid-auto-flow</code>属性决定，默认值是<code>row</code>，即&quot;先行后列&quot;。也可以将它设成<code>column</code>，变成&quot;先列后行&quot;。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-auto-flow: column;</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/xutokec/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>设置了<code>column</code>以后，放置顺序就变成了下图。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032512.png" alt="img"></p><p><code>grid-auto-flow</code>属性除了设置成<code>row</code>和<code>column</code>，还可以设成<code>row dense</code>和<code>column dense</code>。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。</p><p><a href="https://jsbin.com/wapejok/edit?css,output" target="_blank" rel="noreferrer">下面的例子</a>让1号项目和2号项目各占据两个单元格，然后在默认的<code>grid-auto-flow: row</code>情况下，会产生下面这样的布局。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032513.png" alt="img"></p><p>上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。</p><p>现在修改设置，设为<code>row dense</code>，表示&quot;先行后列&quot;，并且尽可能紧密填满，尽量不出现空格。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-auto-flow: row dense;</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/helewuy/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>的效果如下。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032514.png" alt="img"></p><p>上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在1号项目的后面。8号项目和9号项目就会排到第四行。</p><p>如果将设置改为<code>column dense</code>，表示&quot;先列后行&quot;，并且尽量填满空格。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>grid-auto-flow: column dense;</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/pupoduc/1/edit?html,css,output" target="_blank" rel="noreferrer">上面代码</a>的效果如下。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032515.png" alt="img"></p><p>上图会先填满第一列，再填满第2列，所以3号项目在第一列，4号项目在第二列。8号项目和9号项目被挤到了第四列。</p><h3 id="_3-6" tabindex="-1">3.6 <a class="header-anchor" href="#_3-6" aria-label="Permalink to &quot;3.6&quot;">​</a></h3><p>justify-items 属性， align-items 属性， place-items 属性</p><p><code>justify-items</code>属性设置单元格内容的水平位置（左中右），<code>align-items</code>属性设置单元格内容的垂直位置（上中下）。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>justify-items: start | end | center | stretch;</span></span>
<span class="line"><span>align-items: start | end | center | stretch;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>这两个属性的写法完全相同，都可以取下面这些值。</p><blockquote><ul><li>start：对齐单元格的起始边缘。</li><li>end：对齐单元格的结束边缘。</li><li>center：单元格内部居中。</li><li>stretch：拉伸，占满单元格的整个宽度（默认值）。</li></ul></blockquote><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>justify-items: start;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/gijeqej/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>表示，单元格的内容左对齐，效果如下图。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032516.png" alt="img"></p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>align-items: start;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/tecawur/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>表示，单元格的内容头部对齐，效果如下图。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032517.png" alt="img"></p><p><code>place-items</code>属性是<code>align-items</code>属性和<code>justify-items</code>属性的合并简写形式。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>place-items: &lt;align-items&gt; &lt;justify-items&gt;;</span></span></code></pre></div></blockquote><p>下面是一个例子。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>place-items: start end;</span></span></code></pre></div></blockquote><p>如果省略第二个值，则浏览器认为与第一个值相等。</p><h3 id="_3-7" tabindex="-1">3.7 <a class="header-anchor" href="#_3-7" aria-label="Permalink to &quot;3.7&quot;">​</a></h3><p>justify-content 属性， align-content 属性， place-content 属性</p><p><code>justify-content</code>属性是整个内容区域在容器里面的水平位置（左中右），<code>align-content</code>属性是整个内容区域的垂直位置（上中下）。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>justify-content: start | end | center | stretch | space-around | space-between | space-evenly;</span></span>
<span class="line"><span>align-content: start | end | center | stretch | space-around | space-between | space-evenly;  </span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以<code>justify-content</code>属性为例，<code>align-content</code>属性的图完全一样，只是将水平方向改成垂直方向。）</p><blockquote><ul><li>start - 对齐容器的起始边框。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032519.png" alt="img"></p><blockquote><ul><li>end - 对齐容器的结束边框。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032518.png" alt="img"></p><blockquote><ul><li>center - 容器内部居中。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032520.png" alt="img"></p><blockquote><ul><li>stretch - 项目大小没有指定时，拉伸占据整个网格容器。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032521.png" alt="img"></p><blockquote><ul><li>space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032522.png" alt="img"></p><blockquote><ul><li>space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032523.png" alt="img"></p><blockquote><ul><li>space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。</li></ul></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032524.png" alt="img"></p><p><code>place-content</code>属性是<code>align-content</code>属性和<code>justify-content</code>属性的合并简写形式。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>place-content: &lt;align-content&gt; &lt;justify-content&gt;</span></span></code></pre></div></blockquote><p>下面是一个例子。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>place-content: space-around space-evenly;</span></span></code></pre></div></blockquote><p>如果省略第二个值，浏览器就会假定第二个值等于第一个值。</p><h3 id="_3-8" tabindex="-1">3.8 <a class="header-anchor" href="#_3-8" aria-label="Permalink to &quot;3.8&quot;">​</a></h3><p>grid-auto-columns 属性， grid-auto-rows 属性</p><p>有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。</p><p><code>grid-auto-columns</code>属性和<code>grid-auto-rows</code>属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与<code>grid-template-columns</code>和<code>grid-template-rows</code>完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。</p><p><a href="https://jsbin.com/sayuric/edit?css,output" target="_blank" rel="noreferrer">下面的例子</a>里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.container {</span></span>
<span class="line"><span>display: grid;</span></span>
<span class="line"><span>grid-template-columns: 100px 100px 100px;</span></span>
<span class="line"><span>grid-template-rows: 100px 100px 100px;</span></span>
<span class="line"><span>grid-auto-rows: 50px; </span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码指定新增的行高统一为50px（原始的行高为100px）。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032525.png" alt="img"></p><h3 id="_3-9" tabindex="-1">3.9 <a class="header-anchor" href="#_3-9" aria-label="Permalink to &quot;3.9&quot;">​</a></h3><p>grid-template 属性， grid 属性</p><p><code>grid-template</code>属性是<code>grid-template-columns</code>、<code>grid-template-rows</code>和<code>grid-template-areas</code>这三个属性的合并简写形式。</p><p><code>grid</code>属性是<code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code>、 <code>grid-auto-rows</code>、<code>grid-auto-columns</code>、<code>grid-auto-flow</code>这六个属性的合并简写形式。</p><p>从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。</p><h2 id="四、项目属性" tabindex="-1">四、项目属性 <a class="header-anchor" href="#四、项目属性" aria-label="Permalink to &quot;四、项目属性&quot;">​</a></h2><p>下面这些属性定义在项目上面。</p><h3 id="_4-1" tabindex="-1">4.1 <a class="header-anchor" href="#_4-1" aria-label="Permalink to &quot;4.1&quot;">​</a></h3><p>grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性</p><p>项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。</p><blockquote><ul><li><code>grid-column-start</code>属性：左边框所在的垂直网格线</li><li><code>grid-column-end</code>属性：右边框所在的垂直网格线</li><li><code>grid-row-start</code>属性：上边框所在的水平网格线</li><li><code>grid-row-end</code>属性：下边框所在的水平网格线</li></ul></blockquote><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column-start: 2;</span></span>
<span class="line"><span>grid-column-end: 4;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/yukobuf/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032526.png" alt="img"></p><p>上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。</p><p>除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的<code>grid-auto-flow</code>属性决定，这个属性的默认值是<code>row</code>，因此会&quot;先行后列&quot;进行排列。读者可以把这个属性的值分别改成<code>column</code>、<code>row dense</code>和<code>column dense</code>，看看其他项目的位置发生了怎样的变化。</p><p><a href="https://jsbin.com/nagobey/edit?html,css,output" target="_blank" rel="noreferrer">下面的例子</a>是指定四个边框位置的效果。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column-start: 1;</span></span>
<span class="line"><span>grid-column-end: 3;</span></span>
<span class="line"><span>grid-row-start: 2;</span></span>
<span class="line"><span>grid-row-end: 4;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032527.png" alt="img"></p><p>这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column-start: header-start;</span></span>
<span class="line"><span>grid-column-end: header-end;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码中，左边框和右边框的位置，都指定为网格线的名字。</p><p>这四个属性的值还可以使用<code>span</code>关键字，表示&quot;跨越&quot;，即左右边框（上下边框）之间跨越多少个网格。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column-start: span 2;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/hehumay/edit?html,css,output" target="_blank" rel="noreferrer">上面代码</a>表示，1号项目的左边框距离右边框跨越2个网格。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032528.png" alt="img"></p><p>这与<a href="https://jsbin.com/mujihib/edit?html,css,output" target="_blank" rel="noreferrer">下面的代码</a>效果完全一样。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column-end: span 2;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>使用这四个属性，如果产生了项目的重叠，则使用<code>z-index</code>属性指定项目的重叠顺序。</p><h3 id="_4-2" tabindex="-1">4.2 <a class="header-anchor" href="#_4-2" aria-label="Permalink to &quot;4.2&quot;">​</a></h3><p>grid-column 属性， grid-row 属性</p><p><code>grid-column</code>属性是<code>grid-column-start</code>和<code>grid-column-end</code>的合并简写形式，<code>grid-row</code>属性是<code>grid-row-start</code>属性和<code>grid-row-end</code>的合并简写形式。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>grid-column: &lt;start-line&gt; / &lt;end-line&gt;;</span></span>
<span class="line"><span>grid-row: &lt;start-line&gt; / &lt;end-line&gt;;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>下面是一个例子。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column: 1 / 3;</span></span>
<span class="line"><span>grid-row: 1 / 2;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>/* 等同于 */</span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column-start: 1;</span></span>
<span class="line"><span>grid-column-end: 3;</span></span>
<span class="line"><span>grid-row-start: 1;</span></span>
<span class="line"><span>grid-row-end: 2;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码中，项目<code>item-1</code>占据第一行，从第一根列线到第三根列线。</p><p>这两个属性之中，也可以使用<code>span</code>关键字，表示跨越多少个网格。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>background: #b03532;</span></span>
<span class="line"><span>grid-column: 1 / 3;</span></span>
<span class="line"><span>grid-row: 1 / 3;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>/* 等同于 */</span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>background: #b03532;</span></span>
<span class="line"><span>grid-column: 1 / span 2;</span></span>
<span class="line"><span>grid-row: 1 / span 2;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/volugow/edit?html,css,output" target="_blank" rel="noreferrer">上面代码</a>中，项目<code>item-1</code>占据的区域，包括第一行 + 第二行、第一列 + 第二列。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032529.png" alt="img"></p><p>斜杠以及后面的部分可以省略，默认跨越一个网格。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-column: 1;</span></span>
<span class="line"><span>grid-row: 1;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>上面代码中，项目<code>item-1</code>占据左上角第一个网格。</p><h3 id="_4-3-grid-area-属性" tabindex="-1">4.3 grid-area 属性 <a class="header-anchor" href="#_4-3-grid-area-属性" aria-label="Permalink to &quot;4.3 grid-area 属性&quot;">​</a></h3><p><code>grid-area</code>属性指定项目放在哪一个区域。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-area: e;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><a href="https://jsbin.com/qokexob/edit?css,output" target="_blank" rel="noreferrer">上面代码</a>中，1号项目位于<code>e</code>区域，效果如下图。</p><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032530.png" alt="img"></p><p><code>grid-area</code>属性还可用作<code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>、<code>grid-column-end</code>的合并简写形式，直接指定项目的位置。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>grid-area: &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>下面是一个<a href="https://jsbin.com/duyafez/edit?css,output" target="_blank" rel="noreferrer">例子</a>。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1 {</span></span>
<span class="line"><span>grid-area: 1 / 1 / 3 / 3;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><h3 id="_4-4" tabindex="-1">4.4 <a class="header-anchor" href="#_4-4" aria-label="Permalink to &quot;4.4&quot;">​</a></h3><p>justify-self 属性， align-self 属性， place-self 属性</p><p><code>justify-self</code>属性设置单元格内容的水平位置（左中右），跟<code>justify-items</code>属性的用法完全一致，但只作用于单个项目。</p><p><code>align-self</code>属性设置单元格内容的垂直位置（上中下），跟<code>align-items</code>属性的用法完全一致，也是只作用于单个项目。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>justify-self: start | end | center | stretch;</span></span>
<span class="line"><span>align-self: start | end | center | stretch;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p>这两个属性都可以取下面四个值。</p><blockquote><ul><li>start：对齐单元格的起始边缘。</li><li>end：对齐单元格的结束边缘。</li><li>center：单元格内部居中。</li><li>stretch：拉伸，占满单元格的整个宽度（默认值）。</li></ul></blockquote><p>下面是<code>justify-self: start</code>的例子。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>.item-1  {</span></span>
<span class="line"><span>justify-self: start;</span></span>
<span class="line"><span>}</span></span></code></pre></div></blockquote><p><img src="https://www.wangbase.com/blogimg/asset/201903/bg2019032532.png" alt="img"></p><p><code>place-self</code>属性是<code>align-self</code>属性和<code>justify-self</code>属性的合并简写形式。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>place-self: &lt;align-self&gt; &lt;justify-self&gt;;</span></span></code></pre></div></blockquote><p>下面是一个例子。</p><blockquote><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>place-self: center center;</span></span></code></pre></div></blockquote><p>如果省略第二个值，<code>place-self</code>属性会认为这两个值相等。</p><h2 id="五、参考链接" tabindex="-1">五、参考链接 <a class="header-anchor" href="#五、参考链接" aria-label="Permalink to &quot;五、参考链接&quot;">​</a></h2><ul><li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noreferrer">A Complete Guide to Grid</a>, by Chris House</li><li><a href="https://webdesign.tutsplus.com/series/understanding-the-css-grid-layout-module--cms-1079" target="_blank" rel="noreferrer">Understanding the CSS Grid Layout Module</a>, by Ian Yates</li><li><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-an-off-canvas-navigation-with-css-grid--cms-28191" target="_blank" rel="noreferrer">How to Build an Off-Canvas Navigation With CSS Grid</a>, Ian Yates</li><li><a href="https://code.tutsplus.com/tutorials/introduction-to-css-grid-layout-with-examples--cms-25392" target="_blank" rel="noreferrer">Introduction to the CSS Grid Layout With Examples</a>, Dogacan Bilgili</li><li><a href="http://learncssgrid.com/" target="_blank" rel="noreferrer">Learn CSS Grid</a>, Jonathan Suh</li><li><a href="https://blog.theodo.fr/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/" target="_blank" rel="noreferrer">How I stopped using Bootstrap&#39;s layout thanks to CSS Grid</a>, Cédric Kui</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad><a style="text-decoration: none;" href="http://fxl.web3v.work/images/ewm1.jpg">如有侵权请联系删除!</a></p><p class="copyright" data-v-e315a0ad>知否 © 2010-2023</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"flex布局.md\":\"BP87LxcZ\",\"ad域.md\":\"Ct6QumOu\",\"php环境搭建.md\":\"CVn3mOGq\",\"运维技术.md\":\"Dx2197ba\",\"chatgpt.md\":\"116vQvrb\",\"canvas.md\":\"BwWjkpia\",\"wordpress.md\":\"BvKFisN-\",\"常见网络命令.md\":\"h-DLpezj\",\"计算机网络.md\":\"Bz4M_N57\",\"资源.md\":\"DS3xNort\",\"路线.md\":\"Dx-Leifp\",\"链接.md\":\"C2yLG16K\",\"php语法.md\":\"DygtMl6j\",\"php应用.md\":\"3yu1Wkfb\",\"小程序.md\":\"DaQm6-Oa\",\"demo.md\":\"DiAu97_I\",\"node环境.md\":\"CZa20yFJ\",\"mysql.md\":\"BXKoWqoU\",\"公众号开发.md\":\"DxGMsID3\",\"uniapp.md\":\"DtU7Zs8R\",\"linux.md\":\"bMeVK9ek\",\"index.md\":\"fi6iMrxT\",\"tcpip.md\":\"Ci5YZCto\",\"less.md\":\"ISIW88fS\",\"vue2.md\":\"BnnFont-\",\"grid.md\":\"CSGL2tGu\",\"页面布局.md\":\"ByxvjOf0\",\"git.md\":\"CiZB2-Hi\",\"nginx.md\":\"CLg5G08y\",\"js.md\":\"ByNpo5U6\",\"composer.md\":\"DG9b_uff\",\"css.md\":\"CGTcNxn3\",\"es6.md\":\"WlZdqSNs\",\"thinkphp5.md\":\"CcZuUlif\",\"vue3.md\":\"BHHUaqjf\",\"html.md\":\"CQEGThVD\",\"sass.md\":\"lwBcy_PQ\",\"ts.md\":\"CrykCDmH\",\"node.md\":\"Bx01DVfD\",\"javascirpt.md\":\"VFCDtR7c\",\"jq.md\":\"PmLq5t9g\",\"react.md\":\"BD1tXhso\",\"echarts.md\":\"CqfICEkF\",\"laravel8.5.md\":\"GGYwgL9h\",\"案例.md\":\"CXbAG9mn\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"知否\",\"description\":\"Just playing around.\",\"base\":\"/dist/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端开发\",\"items\":[{\"text\":\"HTML\",\"link\":\"./html\"},{\"text\":\"CSS\",\"link\":\"./css\"},{\"text\":\"JavaScript\",\"link\":\"./js\"},{\"text\":\"ECMAScript6\",\"link\":\"./es6\"},{\"text\":\"TypeScript\",\"link\":\"./ts\"},{\"text\":\"Git\",\"link\":\"./git\"},{\"text\":\"React\",\"link\":\"./react\"},{\"text\":\"Vue2\",\"link\":\"./vue2\"},{\"text\":\"Vue3\",\"link\":\"./vue3\"},{\"text\":\"Node.js\",\"link\":\"./node\"},{\"text\":\"微信小程序开发\",\"link\":\"./小程序\"},{\"text\":\"UniApp\",\"link\":\"./uniapp\"},{\"text\":\"公众号开发\",\"link\":\"./公众号开发\"}]},{\"text\":\"PHP\",\"items\":[{\"text\":\"环境搭建\",\"link\":\"/PHP环境搭建\"},{\"text\":\"PHP语法\",\"link\":\"/PHP语法\"},{\"text\":\"Mysql\",\"link\":\"/mysql\"},{\"text\":\"PHP应用\",\"link\":\"/PHP应用\"},{\"text\":\"Composer\",\"link\":\"/Composer\"},{\"text\":\"Thinkphp5.0\",\"link\":\"/Thinkphp5\"},{\"text\":\"Laravel5.6\",\"link\":\"/Laravel8.5\"}]},{\"text\":\"网络技术\",\"items\":[{\"text\":\"TCP/IP协议\",\"link\":\"/tcpip\"},{\"text\":\"常见网络命令\",\"link\":\"/常见网络命令\"},{\"text\":\"计算机网络\",\"link\":\"/计算机网络\"}]},{\"text\":\"运维技术\",\"items\":[{\"text\":\"运维技术\",\"link\":\"/运维技术\"},{\"text\":\"AD域\",\"link\":\"/AD域\"}]},{\"text\":\"知识碎片\",\"items\":[{\"text\":\"页面布局\",\"link\":\"/页面布局\"},{\"text\":\"Grid 网格布局\",\"link\":\"/Grid\"},{\"text\":\"Flex 布局\",\"link\":\"/Flex布局\"},{\"text\":\"Less\",\"link\":\"/less\"},{\"text\":\"Sass\",\"link\":\"/Sass\"},{\"text\":\"Canvas\",\"link\":\"/canvas\"},{\"text\":\"JS文档\",\"link\":\"/JavaScirpt\"},{\"text\":\"Node环境搭建\",\"link\":\"/node环境\"},{\"text\":\"JQuery笔记\",\"link\":\"/jq\"},{\"text\":\"Echarts\",\"link\":\"/echarts\"},{\"text\":\"Nginx\",\"link\":\"/nginx\"},{\"text\":\"WordPress\",\"link\":\"/wordpress\"},{\"text\":\"Linux\",\"link\":\"/linux\"}]},{\"text\":\"资料分享\",\"items\":[{\"text\":\"TCP/IP协议\",\"link\":\"https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA#list/path=%2F\"},{\"text\":\"网络工程师\",\"link\":\"https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ#list/path=%2F\"},{\"text\":\"Linux镜像\",\"link\":\"https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg\"},{\"text\":\"Web开发电子书\",\"link\":\"https://pan.baidu.com/s/1tByRfM5z4vLywmTt206YZg\"},{\"text\":\"心理学电子书\",\"link\":\"https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g#list/path=%2F\"},{\"text\":\"摄影教程\",\"link\":\"https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg#list/path=%2F\"},{\"text\":\"系统激活工具\",\"link\":\"https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew#list/path=%2F\"},{\"text\":\"office软件\",\"link\":\"https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q#list/path=%2F\"},{\"text\":\"计算机维修教程\",\"link\":\"https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q#list/path=%2F\"},{\"text\":\"英语资料\",\"link\":\"https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg#list/path=%2F\"},{\"text\":\"简历模板\",\"link\":\"https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg#list/path=%2F\"},{\"text\":\"教资\",\"link\":\"https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A#list/path=%2F\"},{\"text\":\"网络工程实战\",\"link\":\"https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ#list/path=%2F\"},{\"text\":\"安防弱点资料\",\"link\":\"https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ#list/path=%2F\"},{\"text\":\"Adobe软件\",\"link\":\"https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q#list/path=%2F\"},{\"text\":\"PPT模板\",\"link\":\"https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ#list/path=%2F\"},{\"text\":\"软考系统集成\",\"link\":\"https://pan.baidu.com/s/1Y8q4vXkx9FUpi0U3a7rJKw\"},{\"text\":\"ChatGPT\",\"link\":\"/ChatGPT\"}]}],\"footer\":{\"message\":\"<a style=\\\"text-decoration: none;\\\" href=\\\"http://fxl.web3v.work/images/ewm1.jpg\\\">如有侵权请联系删除!</a>\",\"copyright\":\"知否 © 2010-2023\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>